<template>
	<view class="course-row flex-wrap" @click="handleDetail(item)">
		<view class="course-pic">
			<image :src="item.imghome" mode="aspectFit"></image>
		</view>
		<view class="course-cont">
			<view class="course-name">{{ item.name }}</view>
			<view class="course-price flex-align">學費：<text>{{ item.price }}</text></view>
			<view class="course-action flex-end">
				<view class="btn">立即留位</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: undefined
		}
	},
	methods: {
		handleDetail(row) {
			this.$navigator(`/pages/course/detail?id=${row.id}`)
		},
		async handleReservation(row) {
			await this.checkLogin()
			this.$navigator(`/pages/course/reserved?id=${row.id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
	.course-row {
		position: relative;
		padding: 20rpx;
		border-radius: 16rpx;
		border: 2rpx solid #eee;
		margin-bottom: 20rpx;
		.course-pic {
			width: 296rpx;
			height: 214rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.course-cont {
			flex: 1;
			.course-name {
				color: #303133;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 40rpx;
			}
			.course-price {
				color: #333333;
				font-size: 24rpx;
				text {
					color: #F22520;
					font-size: 30rpx;
					padding-left: 6rpx;
				}
			}
			.course-action {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				.btn {
					text-align: center;
					width: 136rpx;
					height: 44rpx;
					line-height: 44rpx;
					background: #E9930A;
					border-radius: 6rpx;
					color: #fff;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
